<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <div>
          <a-form size="mini" :model="queryData" layout="inline">
            <a-form-item label="仓库类型">
              <a-select popup-container="html"  class="bacClass" :style="{ width: '160px' }" @change="whChange(pageData.warehouseTypeName)"
                v-model="pageData.warehouseTypeName" allow-clear>
                <a-option v-for="item in whTypeList1" :value="item.typeName">
                  {{ item.typeName }}
                </a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="选择公司">
              <a-cascader :options="pageData.corporateList" v-model="queryData.firmId" allow-clear class="bacClass"
                :loading="pageData.corporateLoading" popup-container="html"/>
            </a-form-item>
            <a-form-item label="仓库名称">
              <a-select popup-container="html"  class="bacClass" :style="{ width: '160px' }" v-model.trim="pageData.warehouseName"
                @focus="ckmcFocus" allow-clear :disabled="pageData.isLxs" @change="whCkCodes1(pageData.warehouseName)">
                <a-option v-for="item in whList" :value="item.warehouseName">
                  {{ item.warehouseName }}
                </a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="盒子名称" v-if="id == 2">
              <a-select popup-container="html"  class="bacClass" :style="{ width: '160px' }" v-model="pageData2.boxName" @focus="hzmcFocus"
                allow-clear @change="hzCkCodes">
                <a-option v-for="item in pageData.hzList" :value="item.boxName">
                  {{ item.boxName }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div class="my-tool-bar">
          <Toolbar :items="['查询', '新增', '删除']" @select="selectHanler" @add="addHandler" @del="deleteHandler"
            @export="exports" @import="importHandler" @excel="downloadHandler">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <!-- <div class="my-tool-bar">
                  <Toolbar :items="['查询', '新增', '删除']" @select="selectHanler" @add="addHandler" @del="deleteHandler"
                      @export="exports" @import="importHandler" @excel="downloadHandler">
                  </Toolbar>
              </div> -->
    </template>
    <template #pageTabel>
      <!-- <a-tabs   :justify="true" default-active-key="1" @change="handoff">
                  <a-tab-pane title="仓库包装盒" key="1"> -->
      <!-- <a-table style="height:100%" size="mini" :scrollbar="true" sticky-header
                          @page-change="pagination.change" stripe :bordered="true" :columns="tableColumns"
                          :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
                          v-model:selected-keys="selectedRowKeys" :loading="pageData.pageLoading" :data="table.dataList"
                          :pagination="false" :rowKey="rowKey">
                          <template #edit="{ record }">
                              <a-button type="primary" size="small" status="warning" @click="editHandler(record)"
                                  v-if="pageData.isEdit">
                                  <template #icon>
                                      <icon-edit />
                                  </template>
                                  修 改
                              </a-button>
                          </template>
                      </a-table> -->
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height: 100%"
        :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="table.dataList" :columnDefs="tc"
        :localeText="localeText1"></AgGridVuesCopys>
      <!-- </a-tab-pane> -->
      <!-- <a-tab-pane title="包装盒设置" key="2">
                      <a-table style="height:100%" size="mini" :scrollbar="true" sticky-header
                          @page-change="paginations.change" stripe :bordered="true" :columns="tableColumns2"
                          :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
                          v-model:selected-keys="selectedRowKeys" :loading="pageData.pageLoading" :data="table.dataList"
                          :pagination="{ size: 'small', current: paginations.page, pageSize: paginations.pageSize, total: paginations.total }"
                          :rowKey="rowKey">
                          <template #edit="{ record }">
                              <a-button type="primary" size="small" status="warning" @click="editHandler1(record)"
                                  v-if="pageData.isEdit">
                                  <template #icon>
                                      <icon-edit />
                                  </template>
                                  修 改
                              </a-button>
                          </template>
                      </a-table>
                        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady2" style="height:100%"
                          :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList"
                          :columnDefs="tc2"></AgGridVuesCopys>
                  </a-tab-pane> -->
      <!-- </a-tabs> -->
    </template>
    <paginationCopys style="justify-content: center" :total="total" show-total show-jumper show-page-size @change="PageSize"
      @page-size-change="change1" :page-size="size" :current="page" />
    <a-drawer :drawer-style="{ zIndex: 999 }" :mask-closable="false" :width="400" :visible="pageData.showAdd"
      :ok-loading="pageData.pageLoading" unmountOnClose @ok="sideOk" @cancel="sideNo" cancel-text="关闭" ok-text="保存">
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" layout="horizontal" :model="dataForm">
          <a-form-item label="仓库类型" field="warehouseTypeName" :rules="[{ required: true, message: '仓库类型必选' }]"
            :validate-trigger="['change', 'blur']" label-col-flex="80px" :disabled="pageData.isDetails">
            <a-select popup-container="html"  :class="{ bacClass: !pageData.isDetails }" @change="whChange(dataForm.warehouseTypeName)"
              v-model="dataForm.warehouseTypeName" allow-clear>
              <a-option v-for="item in whTypeList" :value="item.typeName">
                {{ item.typeName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="选择公司" field="firmId" :rules="[{ required: true, message: '公司必填' }]" label-col-flex="80px"
            :disabled="pageData.isDetails">
            <a-cascader :options="pageData.corporateList" @change="corporateChange" v-model="dataForm.firmId" allow-clear
              class="bacClass" ref="corporateRef" :loading="pageData.corporateLoading" popup-container="html"/>
          </a-form-item>
          <a-form-item label="仓库名称" field="warehouseId" :rules="[{ required: true, message: '仓库名称必选' }]"
            :validate-trigger="['change', 'blur']" label-col-flex="80px" :disabled="pageData.isDetails">
            <a-select popup-container="html"  :class="{ bacClass: !pageData.isDetails }" v-model="dataForm.warehouseId" @focus="ckmcFocus1"
              allow-clear :disabled="pageData.isLxs" @change="whCkCodes()">
              <a-option v-for="item in whList" :value="item.id">
                {{ item.warehouseName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="盒子编号" field="boxCode"
            :rules="[{ validator: isChiese }, { required: true, message: '编号必填' }]" :validate-trigger="['change', 'blur']"
            label-col-flex="80px">
            <a-input class="bacClass" v-model="dataForm.boxCode" placeholder="" @blur="inputBlur1" />
          </a-form-item>
          <a-form-item label="盒子名称" field="boxName" :rules="[{ required: true, message: '名称必填' }]"
            :validate-trigger="['change', 'blur']" label-col-flex="80px">
            <a-input class="bacClass" v-model="dataForm.boxName" placeholder="" />
          </a-form-item>
          <a-form-item label="布笼名称" field="shelveName" :validate-trigger="['change', 'blur']" label-col-flex="80px">
            <a-select popup-container="html"  class="bacClass" v-model="dataForm.shelveName" @focus="hjmcFocus" :disabled="pageData.isLxs"
              allow-clear @change="hjCkCodes">
              <a-option v-for="item in pageData.hjList" :value="item.shelveName">
                {{ item.shelveName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="储位名称" field="storageName" :validate-trigger="['change', 'blur']" label-col-flex="80px">
            <a-select popup-container="html"  class="bacClass" v-model="dataForm.storageName" @focus="cwmcFocus" :disabled="pageData.isLxs"
              allow-clear @change="cwCkCodes">
              <a-option v-for="item in pageData.cwList" :value="item.storageName">
                {{ item.storageName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="备注" field="remark" label-col-flex="80px">
            <a-textarea class="bacClass" v-model="dataForm.remark" :max-length="400" allow-clear show-word-limit />
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
    <a-drawer :drawer-style="{ zIndex: 999 }" :mask-closable="false" :width="400" :visible="pageData2.showAdd"
      :ok-loading="pageData2.pageLoading" unmountOnClos @ok="sideOk1" @cancel="sideNo2" cancel-text="关闭" ok-text="保存">
      <template #title>
        {{ pageData2.sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" layout="horizontal" :model="dataForm">
          <a-form-item label="仓库类型" field="warehouseTypeName" :rules="[{ required: true, message: '仓库类型必选' }]"
            :validate-trigger="['change', 'blur']" label-col-flex="80px">
            <a-select popup-container="html"  class="bacClass" @change="whChange(dataForm.warehouseTypeName)" v-model="dataForm.warehouseTypeName"
              allow-clear>
              <a-option v-for="item in whTypeList" :value="item.typeName">
                {{ item.typeName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="选择公司" field="firmId" :rules="[{ required: true, message: '公司必填' }]" label-col-flex="80px">
            <a-select popup-container="html"  class="bacClass" v-model="dataForm.firmId" @change="companyChange" allow-clear>
              <a-option v-for="item in gs" :value="item.id" @click="getAllActiveCompany2">
                {{ item.typeName }}{{ item.typeName == '' ? '' : ' - ' }}{{ item.firmName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="仓库名称" field="warehouseId" :rules="[{ required: true, message: '仓库名称必选' }]"
            :validate-trigger="['change', 'blur']" label-col-flex="80px">
            <a-select popup-container="html"  class="bacClass" v-model="dataForm.warehouseId" @focus="ckmcFocus1" allow-clear
              :disabled="pageData.isLxs" @change="whCkCodes1(dataForm.warehouseId)">
              <a-option v-for="item in whList" :value="item.id">
                {{ item.warehouseName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="盒子名称" field="boxName" :rules="[{ required: true, message: '盒子名称必选' }]"
            :validate-trigger="['change', 'blur']" label-col-flex="80px">
            <a-select popup-container="html"  class="bacClass" v-model="dataForm.boxName" @focus="hzmcFocus1" allow-clear
              @change="hzCkCodes(dataForm.boxName)" @click="handleSearchs2">
              <a-option v-for="item in pageData.hzList" :value="item.boxName">
                {{ item.boxName }}
              </a-option>
            </a-select>
          </a-form-item>
          <!-- <a-form-item
              label="位置编号"
              field="positionCode"
              :rules="[{ validator: isChiese }, { required: true, message: '位置编号必填' }]"
              :validate-trigger="['change', 'blur']"
              label-col-flex="80px"
            >
              <a-input class="bacClass" v-model="dataForm.positionCode" @blur="inputBlur" />
            </a-form-item>
            <a-form-item
              label="位置名称"
              field="positionName"
              :rules="[{ required: true, message: '位置名称必填' }]"
              :validate-trigger="['change', 'blur']"
              label-col-flex="80px"
            >
              <a-input class="bacClass" v-model="dataForm.positionName" />
            </a-form-item> -->
          <a-form-item label="备注" field="remark" label-col-flex="80px">
            <a-textarea class="bacClass" style="height: 70px" v-model="dataForm.remark" auto-size="true" :max-length="400"
              allow-clear show-word-limit />
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>
<script lang="ts">
import { baseURL } from '../../../api/axios.config'
import axios from 'axios'
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import { ref, reactive, onMounted, toRefs, h, watch } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { Form, Message, Modal } from '@arco-design/web-vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import filedownload from 'js-file-download'
import usePermission from '@/store/modules/permission'
import { indexOf, keyBy } from 'lodash'
import emitter from '@/hooks/useEventBus'
import WHService, { Warhouse, CompanyList, WhTypeField } from '@/service/wh'
import TreeUtils from '@/utils/TreeUtils'

import { Console } from 'console'
import { valueEquals } from 'element-plus'
import { localeText } from '@/api/aggridZw'
import { slicing } from '@/utils/caseFrimAndSecRig'
interface Cloth {
  code: string
}

interface ClothInfo {
  id: any
  warehouseCode: any
  warehouseName: string
  boxCode: string
  boxName: string
  shelveCode: string
  shelveName: string
  storageName: string
  storageCode: string
  remark: string
  firm: any
  typeName: string
  warehouseTypeName: string
  positionCode: any
  positionName: string
  firmName: string
  warehouseNames: any
  ckName: string
  hzName: string
  firmId: any
  typeCode: any
  warehouseId: any
}

export default {
  name: 'PackagingManagement',
  setup() {
    const whService = new WHService()
    const whService1 = new WHService()
    const whList = ref<any[]>([])
    let whTypeList = whService.whTypeList
    let whTypeList1 = whService1.whTypeList
    const whTypeFieldList = whService.whTypeFieldList
    const treeUtils = new TreeUtils()
    const companyList: any = whService.companyList
    const total = ref(10)
    const page = ref(1)
    const size = ref(10)
    function PageSize(val: any) {
      if (id.value == 1) {
        page.value = val
        doRefresh()
      } else {
        page.value = val
        doRefresh2()
      }
    }
    function change1(val: any) {
      if (id.value == 1) {
        size.value = val
        doRefresh()
      } else {
        size.value = val
        doRefresh2()
      }
    }
    const headerShow = ref<boolean>(true)
    let id = ref(1)
    const handoff = (key: any) => {
      id.value = key
      if (id.value == 1) {
        table.handleSuccess(tableList1)
      } else {
        table.handleSuccess(tableList2)
      }
      dataForm.warehouseCode = ''
    }
    let tableList1 = ref([])
    let tableList2 = ref([])
    //查询 仓库包装盒
    function doRefresh() {
      pageData.pageLoading = true
      let whName = ''
      treeUtils.findTreeNodeById(whService.companyList.value, dataForm.firmId, (node: any) => {
        whName = node.label
      })
      post({
        url: 'dwWms/warehouseBox/getBoxPage',
        data: {
          page: page.value,
          size: size.value,
          warehouseName: pageData.warehouseName,
          firmId: queryData.firmId,
          // typeName: pageData.warehouseTypeName
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            table.handleSuccess(data.list)
            // pagination.setTotalSize(data.total);
            gridOption.value.setRowData(data.list)
            total.value = data.total
          }
        })
        .catch(console.log)
        .finally(() => {
          pageData.pageLoading = false
        })
    }

    //查询 包装盒设置
    function doRefresh2() {
      pageData2.pageLoading = true
      let whName = ''
      treeUtils.findTreeNodeById(whService.companyList.value, pageData.firmId, (node: any) => {
        whName = node.label
      })
      post({
        url: 'dwWms/warehouseBoxSetposition/getBoxSetpositionPage',
        data: {
          page: page.value,
          size: size.value,
          boxName: pageData2.boxName,
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            table.handleSuccess(data.list)
            // pagination.setTotalSize(data.total);
            gridOption2.value.setRowData(data.list)
            total.value = data.total
          }
        })
        .catch(console.log)
        .finally(() => {
          pageData2.pageLoading = false
        })
    }

    const { selectedRowKeys, onSelectionChange } = useRowSelection()
    const pagination = usePagination(doRefresh)
    const paginations = usePagination(doRefresh2)
    const table = useTable()
    const rowKey = useRowKey('id')
    //仓库包装盒
    const tableColumns = useTableColumn([
      {
        title: '仓库类型',
        key: 'warehouseTypeName',
        dataIndex: 'warehouseTypeName',
        width: 150,
      },
      {
        title: '公司',
        key: 'firm',
        dataIndex: 'firm',
        width: 150,
      },
      {
        title: '仓库名称',
        key: 'warehouseName',
        dataIndex: 'warehouseName',
        width: 150,
      },
      {
        title: '仓库编号',
        key: 'warehouseCode',
        dataIndex: 'warehouseCode',
        width: 150,
      },
      {
        title: '盒子编号',
        key: 'boxCode',
        dataIndex: 'boxCode',
        width: 150,
      },

      {
        title: '盒子名称',
        key: 'boxName',
        dataIndex: 'boxName',
        width: 150,
      },
      {
        title: '布笼编号',
        key: 'shelveCode',
        dataIndex: 'shelveCode',
        width: 150,
      },
      {
        title: '布笼名称',
        key: 'shelveName',
        dataIndex: 'shelveName',
        width: 150,
      },

      {
        title: '储位编号',
        key: 'storageCode',
        dataIndex: 'storageCode',
        width: 150,
      },
      {
        title: '储位名称',
        key: 'storageName',
        dataIndex: 'storageName',
        width: 150,
      },
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        width: 150,
      },
      {
        title: '创建人',
        key: 'createName',
        dataIndex: 'createName',
        width: 150,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        width: 200,
      },
      {
        title: '修改人',
        key: 'updateName',
        dataIndex: 'updateName',
        width: 150,
      },
      {
        title: '修改时间',
        key: 'updateTime',
        dataIndex: 'updateTime',
        width: 200,
      },
      {
        title: '操作',
        key: 'edit',
        dataIndex: 'edit',
        slotName: 'edit',
        width: 150,
        fixed: 'right',
      },
    ])
    //包装盒设置
    const tableColumns2 = useTableColumn([
      {
        title: '仓库类型',
        key: 'warehouseTypeName',
        dataIndex: 'warehouseTypeName',
        width: 150,
      },
      {
        title: '公司',
        key: 'firm',
        dataIndex: 'firm',
        width: 150,
      },
      {
        title: '仓库名称',
        key: 'warehouseName',
        dataIndex: 'warehouseName',
        width: 150,
      },
      {
        title: '盒子编号',
        key: 'boxCode',
        dataIndex: 'boxCode',
        width: 150,
      },
      {
        title: '盒子名称',
        key: 'boxName',
        dataIndex: 'boxName',
        width: 150,
      },
      {
        title: '位置编号',
        key: 'positionCode',
        dataIndex: 'positionCode',
        width: 150,
      },
      {
        title: '位置名称',
        key: 'positionName',
        dataIndex: 'positionName',
        width: 150,
      },
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        width: 150,
      },
      {
        title: '创建人',
        key: 'createName',
        dataIndex: 'createName',
        width: 150,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        width: 200,
      },
      {
        title: '最后修改人',
        key: 'updateName',
        dataIndex: 'updateName',
        width: 150,
      },
      {
        title: '最后修改时间',
        key: 'updateTime',
        dataIndex: 'updateTime',
        width: 200,
      },
      {
        title: '操作',
        key: 'edit',
        dataIndex: 'edit',
        slotName: 'edit',
        width: 150,
        fixed: 'right',
      },
    ])

    let tc: any[] = tableColumns.map((o) => {
      let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
      }
      if (o.slotName === 'edit') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj['lockPosition'] = 'right'
        obj['width'] = 140
        obj['cellRenderer'] = {
          template: ` <a-space>
                        <a-button style="position:relative;left:10px" type="primary" size="small" status="warning" @click="a">
                            <template #icon>
                                <icon-edit />
                            </template>
                            修 改
                        </a-button>
                            </a-space>`,
          setup(props: any) {
            const isDtas = ref(props.params.data)
            const a = () => {
              editHandler(props.params.data)
            }
            return {
              a,
              isDtas,
            }
          },
        }
      }

      return obj
    })

    let tc2: any[] = tableColumns2.map((o) => {
      let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
      }
      if (o.slotName === 'edit') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false
        obj['lockPosition'] = 'right'
        obj['width'] = 120
        obj['cellRenderer'] = {
          template: `<a-space>
                        <a-button type="primary" size="small" status="warning" @click="a">
                            <template #icon>
                                <icon-edit />
                            </template>
                            修 改
                        </a-button>
                            </a-space>`,
          setup(props: any) {
            const isDtas = ref(props.params.data)
            const a = () => {
              editHandler1(props.params.data)
            }
            return {
              a,
              isDtas,
            }
          },
        }
      }

      return obj
    })

    let a = [
      {
        showRowGroup: 'hide_def',
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: 'left',
      },
    ]

    tc = a.concat(tc)
    tc2 = a.concat(tc2)

    const pageData = reactive<{
      clothList: Cloth[]
      showAdd: boolean
      sideTitle: string
      typeName: any
      dropDownData: any
      yarnTypeName: []
      pageLoading: any
      warehouseName: string
      rHeight: number | undefined
      btnList: any[]
      isEdit: boolean
      firm: string
      whTypeName: string
      whType: string
      warehouseCode: string
      ckName: any
      positionCode: string
      positionName: string
      boxCode: any
      boxName: string
      boxNames: []
      isShow: boolean
      firmName: any
      warehouseNames: []
      isLxs: boolean
      shelveCode: string
      shelveName: string
      storageName: string
      storageCode: string
      remark: string
      createName: string
      createTime: string
      updateName: string
      updateTime: string
      isWh: boolean
      ckType: any[]
      gsType: any[]
      nameList: any[]
      warehouseTypeName: string
      firmId: any
      hzList: any[]
      cwList: any[]
      hjList: any[]
      isDetails: boolean
      corporateList: any[]
      corporateLoading: boolean
    }>({
      clothList: [],
      showAdd: false,
      sideTitle: '新增仓库包装盒',
      typeName: '',
      dropDownData: '',
      yarnTypeName: [],
      pageLoading: false,
      warehouseName: '',
      rHeight: 0,
      btnList: [],
      isEdit: false,
      firm: '',
      whTypeName: '',
      whType: '',
      warehouseCode: '',
      ckName: '',
      positionCode: '',
      positionName: '',
      boxCode: '',
      boxName: '',
      boxNames: [],
      isShow: false,
      firmName: '',
      warehouseNames: [],
      isLxs: false,
      shelveCode: '',
      shelveName: '',
      storageName: '',
      storageCode: '',
      remark: '',
      createName: '',
      createTime: '',
      updateName: '',
      updateTime: '',
      isWh: false,
      ckType: [],
      gsType: [],
      nameList: [],
      warehouseTypeName: '',
      firmId: '',
      hzList: [],
      cwList: [],
      hjList: [],
      isDetails: false,
      corporateList: [],
      corporateLoading: false,
    })
    const pageData2 = reactive<{
      clothList: Cloth[]
      showAdd: boolean
      sideTitle: string
      typeName: []
      dropDownData: any
      yarnTypeName: []
      pageLoading: any
      warehouseName: string
      rHeight: number | undefined
      btnList: any[]
      isEdit: boolean
      firm: string
      whTypeName: string
      whType: string
      warehouseCode: string
      ckName: any
      positionCode: string
      positionName: string
      boxCode: any
      boxName: string
      boxNames: []
      nameList: []
      warehouseNames: []
      createName: string
      createTime: string
      updateName: string
      updateTime: string
      warehouseTypeName: string
      firmId: any
      hzList: any[]
      cwList: any[]
      hjList: any[]
    }>({
      clothList: [],
      showAdd: false,
      sideTitle: '新增包装盒',
      typeName: [],
      dropDownData: '',
      yarnTypeName: [],
      pageLoading: false,
      warehouseName: '',
      rHeight: 0,
      btnList: [],
      isEdit: false,
      firm: '',
      whTypeName: '',
      whType: '',
      warehouseCode: '',
      ckName: '',
      positionCode: '',
      positionName: '',
      boxCode: '',
      boxName: '',
      boxNames: [],
      nameList: [],
      warehouseNames: [],
      createName: '',
      createTime: '',
      updateName: '',
      updateTime: '',
      warehouseTypeName: '',
      firmId: '',
      hzList: [],
      cwList: [],
      hjList: [],
    })
    const pageData3 = reactive<{
      clothList: Cloth[]
      showAdd: boolean
      sideTitle: string
    }>({
      clothList: [],
      showAdd: false,
      sideTitle: '修改包装盒',
    })

    // const ckChange = (ck: any) => {
    //     if (dataForm.warehouseId != "") {
    //         pageData.isLxs = true;
    //     } else {
    //         pageData.isLxs = false;
    //     }
    // }
    let gs = ref<any[]>([])
    // 获取公司下拉框
    // const getAllActiveCompany = () => {
    //   if (pageData.warehouseTypeName == '') {
    //     pageData.firmId = null
    //     Message.error('请先选择仓库类别')
    //     return
    //   } else {
    //     post({
    //       url: 'org/firmGroup/getFirmInfoByMap',
    //       data: {},
    //     }).then((res) => {
    //       if (res.code == 200) {
    //         gs.value = res.data
    //       }
    //     })
    //   }
    // }
    const getAllActiveCompany2 = () => {
      if (dataForm.warehouseTypeName == '') {
        dataForm.firmId = null
        Message.error('请先选择仓库类别')
        return
      }
      // else {
      //   post({
      //     url: 'org/firmGroup/getFirmInfoByMap',
      //     data: {},
      //   }).then((res) => {
      //     if (res.code == 200) {
      //       gs.value = res.data
      //     }
      //   })
      // }
    }
    //仓库类型的下拉框改变
    const whChange = (lx: any) => {
      pageData.firmId = null
      pageData.warehouseName = ''
      pageData2.boxName = ''
      dataForm.boxName = ''
      dataForm.warehouseId = ''
      dataForm.storageName = ''
      dataForm.shelveName = ''
      let data = { warehouseTypeName: lx }
      whService.loadWHTypeFieldList(data)
      if (lx != '' && dataForm.firmName != '') {
        pageData.isLxs = true
      } else {
        pageData.isLxs = false
      }
    }
    watch(
      () => whService.whList.value,
      (o, n) => {
        whList.value = whService.whList.value
      }
    )
    // 公司下拉框 新增
    let whName = ''
    const companyChange = (val: any) => {
      dataForm.warehouseId = ''
      dataForm.storageName = ''
      dataForm.shelveName = ''
      dataForm.boxName = ''
      const firmIdList: any = companyList.value.filter((item: any) => {
        return item.id == val
      })
      dataForm.firmId = firmIdList[0].id
      dataForm.firmName =
        firmIdList[0].typeName == ''
          ? firmIdList[0].firmName
          : firmIdList[0].typeName + '-' + firmIdList[0].firmName
      // treeUtils.findTreeNodeById(whService.companyList.value, dataForm.firm, (node: any) => {
      //     whName = node.label
      // })

      whService.getWarhouseList(dataForm.firmId, dataForm.warehouseTypeName)
      if (val != '' && dataForm.typeName != '') {
        pageData.isLxs = true
      } else {
        pageData.isLxs = false
      }

      // companyList.value.forEach((item: any) => {
      //     if (item.firmName == val) {
      //         dataForm.firmId = item.firmId
      //     }
      // })
    }
    //公司下拉框 查询
    const companyChange1 = (val: any) => {
      pageData.warehouseName = ''
      pageData2.boxName = ''
      const firmIdList: any = companyList.value.filter((item: any) => {
        return item.id == val
      })
      whService.getWarhouseList(pageData.firmId, pageData.warehouseTypeName)
      if (val != '' && dataForm.typeName != '') {
        pageData.isLxs = true
      } else {
        pageData.isLxs = false
      }
      // companyList.value.forEach((item: any) => {
      //     if (item.firmName == val) {
      //         pageData.firmId = item.firmId
      //     }
      // })
    }
    const gsClick = () => {
      if (pageData.warehouseTypeName == '') {
        pageData.firmId = null
        Message.error('请先选择仓库类别')
        return
      }
    }
    //下拉框查询 仓库
    function selCxAll(val: any) {
      post({
        url: 'dwWms/warehouseBox/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          dataForm.warehouseName = data
          // pageData2.boxName = data;
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    //包装盒
    function selCxAll2(val: any) {
      post({
        url: 'dwWms/warehouseBox/getLikeBoxName',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          pageData.warehouseName = data
          dataForm.boxName = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    //仓库
    const focusSel2 = () => {
      selCxAll({ warehouseName: '', deleteState: 0 })
    }
    //盒子
    const focusSel = () => {
      selCxAll2({ boxName: '', deleteState: 0 })
    }

    let szTypeName = ref([])
    const options12 = ref<any>(pageData.warehouseName)
    const loadings12 = ref(false)
    const handleSearch12 = (value: any) => {
      if (value) {
        const ob = { boxName: value, deleteState: 0 }
        loadings12.value = true
        selCxAll12(ob)
        options12.value = pageData.warehouseName
        loadings12.value = false
      } else {
        options12.value = []
      }
    }
    function selCxAll12(val: any) {
      post({
        url: 'dwWms/warehouseBox/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          // (data as string[]).splice(0, 0, "全部");
          pageData.warehouseName = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    //盒子
    const handleSearch11 = (value: any) => {
      if (value) {
        const ob = { boxName: value, deleteState: 0 }
        loadings12.value = true
        selCxAll2(ob)
        options12.value = pageData2.boxName
        loadings12.value = false
      } else {
        options12.value = []
      }
    }

    const szTyoeNames = (value: any) => {
      post({
        url: 'dwWms/warehouseBox/getFieldValue',
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            szTypeName.value = data
          }
        })
        .catch(console.log)
    }

    //下拉框得到焦点 仓库类别
    const focusSel5 = () => {
      selCxAll5({ typeName: '', deleteState: 0 })
    }
    //下拉数据 仓库类别
    const options5 = ref<any>(pageData.ckType)
    const loading5 = ref(false)
    const handleSearch5 = (value: any) => {
      if (value) {
        const ob = { typeName: value, deleteState: 0 }
        loading5.value = true
        selCxAll5(ob)
        options5.value = pageData.ckType
        loading5.value = false
      } else {
        options5.value = []
      }
    }
    //下拉框查询 仓库类别
    function selCxAll5(val: any) {
      post({
        url: '/dwWms/warehouseType/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          let dataList: any = []
          data.forEach(function (o: any) {
            dataList.push(o['typeName'])
          })
          pageData.ckType = dataList
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    // //下拉框得到焦点 公司
    // const focusSel6 = () => {
    //   selCxAll6({ firm: '', deleteState: 0 })
    // }
    // //下拉数据 公司
    // const options6 = ref<any>(pageData.gsType)
    // const loading6 = ref(false)
    // const handleSearch6 = (value: any) => {
    //   if (value) {
    //     const ob = { firm: value, deleteState: 0 }
    //     loading6.value = true
    //     selCxAll6(ob)
    //     options6.value = pageData.gsType
    //     loading6.value = false
    //   } else {
    //     options6.value = []
    //   }
    // }
    // //下拉框查询 公司
    // function selCxAll6(val: any) {
    //   post({
    //     url: '/org/firmGroup/getFirmInfoByMap',
    //     data: val,
    //   }).then(({ data, code }: any) => {
    //     if (code === 200) {
    //       let dataList: any = []
    //       data.forEach(function (o: any) {
    //         dataList.push(o['firm'])
    //       })
    //       pageData.gsType = dataList
    //     } else {
    //       Message.error({
    //         content: '查询失败！',
    //         duration: 5000,
    //       })
    //     }
    //   })
    // }

    //下拉框得到焦点 仓库名称
    const focusSel7 = () => {
      selCxAll7({ warehouseName: '', deleteState: 0 })
    }
    //下拉数据 仓库名称
    const options7 = ref<any>(pageData.nameList)
    const loading7 = ref(false)
    const handleSearch7 = (value: any) => {
      if (value) {
        const ob = { warehouseName: value, deleteState: 0 }
        loading7.value = true
        selCxAll7(ob)
        options7.value = pageData.nameList
        loading7.value = false
      } else {
        options7.value = []
      }
    }
    //下拉框查询 仓库名称
    function selCxAll7(val: any) {
      post({
        url: '/dwWms/warehouse/getWarehouseByType',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          let dataList: any = []
          data.forEach(function (o: any) {
            dataList.push(o['warehouseName'])
          })
          pageData.nameList = dataList
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }
    const corporateRef = ref<any>()
    const corporateChange = (event: any) => {
      nextTick(() => {
        dataForm.firm = slicing(corporateRef.value.selectViewValue[0].label)
      })
    }
    // 获取公司列表
    const getCorporateList = async () => {
      try {
        pageData.corporateLoading = true
        const res = await post({ url: 'org/baCompany/getTreeCompanyByUser' })
        if (res.code == 200) {
          pageData.corporateList = res.data
          return
        }
        Message.error(res.message)
      } catch (error: any) {
        pageData.corporateLoading = false
      } finally {
        pageData.corporateLoading = false
      }
    }

    onMounted(() => {
      getCorporateList()
      // 切换tap到本页面执行的方法
      emitter.on('PackagingManagement', () => {
        if (id.value == 1) {
          // selCxAll({});
          doRefresh()
        } else if (id.value == 2) {
          // selCxAll({});
          doRefresh2()
        }
      })
    })
    const queryData = reactive({
      clothType: '',
      firmId: '',
    })

    //仓库名称 查询下拉框
    const ckmcFocus = () => {
      if (pageData.firmId == null || pageData.warehouseTypeName == '' || pageData.firmId == '') {
        whList.value = []
        Message.error('请先选择仓库类别和公司')
        return
      } else {
        post({
          url: '/dwWms/warehouse/getWarehouseByPara',
          data: {
            firmId: pageData.firmId,
            warehouseTypeName: pageData.warehouseTypeName,
            // "warehouseName":dataForm.warehouseName
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              whList.value = data
            }
          })
          .catch(console.log)
      }
    }
    //仓库名称 新增下拉框
    const ckmcFocus1 = () => {
      if (dataForm.firmId == null || dataForm.warehouseTypeName == '' || dataForm.firmId == '') {
        whList.value = []
        Message.error('请先选择仓库类别和公司')
        return
      } else {
        post({
          url: '/dwWms/warehouse/getWarehouseByPara',
          data: {
            firmId: dataForm.firmId,
            warehouseTypeName: dataForm.warehouseTypeName,
            // "warehouseName":dataForm.warehouseName
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              whList.value = data
            }
          })
          .catch(console.log)
      }
    }
    //仓库名称 修改下拉框
    const ckmcFocus3 = () => {
      post({
        url: '/dwWms/warehouse/getWarehouseByPara',
        data: {
          firmId: dataForm.firmId,
          warehouseTypeName: dataForm.warehouseTypeName,
          // "warehouseName":dataForm.warehouseName
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            whList.value = data
          }
        })
        .catch(console.log)
    }
    //盒子名称 查询下拉框
    const hzmcFocus = () => {
      if (pageData.warehouseName == '') {
        pageData2.boxName = ''
        Message.error('请先选择仓库名称')
        return
      } else {
        post({
          url: 'dwWms/warehouseBox/getWarehouseBoxByPara',
          data: {
            warehouseName: pageData.warehouseName,
            // "boxName": pageData2.boxName,
            // "warehouseCode": dataForm.warehouseCode
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              pageData.hzList = data
            }
          })
          .catch(console.log)
      }
    }
    //盒子名称 新增下拉框
    const hzmcFocus1 = () => {
      if (dataForm.warehouseId == '') {
        dataForm.boxName == ''
        return
      } else {
        post({
          url: 'dwWms/warehouseBox/getWarehouseBoxByPara',
          data: {
            warehouseId: dataForm.warehouseId,
            // "warehouseCode": pageData.warehouseCode
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              pageData.hzList = data
            }
          })
          .catch(console.log)
      }
    }
    //新增 布笼名称的下拉框
    const hjmcFocus = () => {
      if (dataForm.warehouseId == '') {
        dataForm.shelveName == ''
        Message.error('请先选择仓库名称')
        return
      } else {
        post({
          url: '/dwWms/shelve/getShelveByPara',
          data: {
            warehouseId: dataForm.warehouseId,
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              pageData.hjList = data
            }
          })
          .catch(console.log)
      }
    }
    //新增 储位名称的下拉框
    const cwmcFocus = () => {
      if (dataForm.warehouseId == '') {
        dataForm.storageName == ''
        Message.error('请先选择仓库名称')
        return
      } else {
        post({
          url: '/dwWms/Storage/getStorageByPara',
          data: {
            warehouseId: dataForm.warehouseId,
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              pageData.cwList = data
            }
          })
          .catch(console.log)
      }
    }
    const addHandler = () => {
      pageData.isDetails = false
      for (const key in dataForm) {
        if (key == 'id') {
          dataForm.id = null
        } else {
          dataForm[key] = ''
        }
      }
      if (id.value == 1) {
        pageData.showAdd = true
        pageData.sideTitle = '新增仓库包装盒'
      } else if (id.value == 2) {
        pageData2.showAdd = true
        pageData2.sideTitle = '新增包装盒'
      }
    }
    const dataForm = reactive<ClothInfo>({
      id: null,
      warehouseCode: '',
      warehouseName: '',
      boxCode: '',
      boxName: '',
      shelveCode: '',
      shelveName: '',
      storageName: '',
      storageCode: '',
      remark: '',
      firm: '',
      typeName: '',
      warehouseTypeName: '',
      positionCode: '',
      positionName: '',
      firmName: '',
      warehouseNames: '',
      ckName: '',
      hzName: '',
      firmId: null,
      typeCode: '',
      warehouseId: null,
    })
    // 表格准备事件
    const gridOption = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
    }
    const gridOption2 = ref()
    const gridReady2 = (params: any) => {
      gridOption2.value = params.api
    }
    const formRef = ref<FormInstance>()
    const sideOk = () => {
      console.log('dataForm.firmIddataForm.firmIddataForm.firmId')
      // szTyoeNames({});
      formRef.value?.validate().then((err) => {
        console.log(err)
        if (!err) {
          pageData.pageLoading = true
          let firmNames: any
          if (pageData.sideTitle === '新增仓库包装盒') {
            companyList.value.forEach((item: any) => {
              if (item.id == dataForm.firmId) {
                firmNames = item.typeName ? item.typeName + '-' + item.firmName : item.firmName
              }
            })
            let dataForms = {
              // warehouseTypeName:dataForm.warehouseTypeName,
              firmId: dataForm.firmId,
              firm: dataForm.firm,
              warehouseTypeName: dataForm.warehouseTypeName,
              warehouseCode: dataForm.warehouseCode,
              warehouseId: dataForm.warehouseId,
              warehouseName: dataForm.warehouseName,
              boxCode: dataForm.boxCode,
              boxName: dataForm.boxName,
              shelveCode: dataForm.shelveCode,
              shelveName: dataForm.shelveName,
              storageName: dataForm.storageName,
              storageCode: dataForm.storageCode,
              remark: dataForm.remark,
            }
            post({
              url: 'dwWms/warehouseBox/addBox',
              data: [dataForms],
            })
              .then((res: any) => {
                if (res.code === 200) {
                  doRefresh()
                  formRef.value?.resetFields()
                  pageData.showAdd = false
                  Message.success({
                    content: '新增成功',
                    duration: 5000,
                  })
                  doRefresh()
                  pageData.showAdd = false
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          } else if (pageData.sideTitle === '修改仓库包装盒') {
            let firmNames: any
            companyList.value.forEach((item: any) => {
              if (item.id == dataForm.firmId) {
                firmNames = item.typeName ? item.typeName + '-' + item.firmName : item.firmName
              }
            })
            const dataForms = {
              id: dataForm.id,
              firmId: dataForm.firmId,
              firm: dataForm.firm,
              warehouseTypeName: dataForm.warehouseTypeName,
              warehouseCode: dataForm.warehouseCode,
              warehouseId: dataForm.warehouseId,
              warehouseName: dataForm.warehouseName,
              boxCode: dataForm.boxCode,
              boxName: dataForm.boxName,
              shelveCode: dataForm.shelveCode,
              shelveName: dataForm.shelveName,
              storageName: dataForm.storageName,
              storageCode: dataForm.storageCode,
              remark: dataForm.remark,
            }
            post({
              url: 'dwWms/warehouseBox/updateBox',
              data: [dataForms],
            })
              .then(({ data, code, message }: any) => {
                if (code === 200) {
                  formRef.value?.resetFields()
                  Message.success({
                    content: '修改成功',
                    duration: 5000,
                  })
                  doRefresh()
                  pageData.showAdd = false
                } else {
                  Message.success({
                    content: message,
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          }
        }
      })
    }
    const isArr = ref([])
    const sideOk1 = () => {
      formRef.value?.validate().then((err) => {
        if (!err) {
          pageData.pageLoading = true
          let firmNames: any
          companyList.value.forEach((item: any) => {
            if (item.id == dataForm.firmId) {
              firmNames = item.typeName ? item.typeName + '-' + item.firmName : item.firmName
            }
          })
          const dataForms = {
            id: dataForm.id,
            firmId: dataForm.firmId,
            firm: firmNames,
            warehouseTypeName: dataForm.warehouseTypeName,
            warehouseCode: dataForm.warehouseCode,
            warehouseId: dataForm.warehouseId,
            warehouseName: dataForm.warehouseName,
            boxCode: dataForm.boxCode,
            boxName: dataForm.boxName,
            shelveCode: dataForm.shelveCode,
            shelveName: dataForm.shelveName,
            storageName: dataForm.storageName,
            storageCode: dataForm.storageCode,
            positionCode: dataForm.positionCode,
            positionName: dataForm.positionName,
            remark: dataForm.remark,
          }
          if (dataForm.id == undefined || dataForm.id == '') {
            dataForms.id = undefined
            post({
              url: 'dwWms/warehouseBoxSetposition/addBoxSetInfo',
              data: [dataForms],
            })
              .then((res: any) => {
                if (res.code === 200) {
                  doRefresh2()
                  formRef.value?.resetFields()
                  Message.success({
                    content: '新增成功',
                    duration: 5000,
                  })
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
                doRefresh2()
              })
              .finally(() => {
                doRefresh2()
                pageData.pageLoading = false
              })
          } else {
            post({
              url: 'dwWms/warehouseBoxSetposition/updateBoxSetInfo',
              data: [dataForms],
            })
              .then((res: any) => {
                if (res.code === 200) {
                  doRefresh2()
                  formRef.value?.resetFields()
                  Message.success({
                    content: '修改成功',
                    duration: 5000,
                  })
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                doRefresh2()
                pageData.pageLoading = false
              })
          }
          formRef.value?.resetFields()
          pageData2.showAdd = false
        }
      })
    }
    const sideNo = () => {
      pageData.showAdd = false
      formRef.value?.resetFields()
    }
    const sideNo2 = () => {
      pageData2.showAdd = false
      formRef.value?.resetFields()
    }
    const deleteHandler = () => {
      if (
        gridOption.value.getSelectedRows().length === 0 &&
        gridOption2.value.getSelectedRows().length === 0
      ) {
        Message.error('请先勾选')
        return
      }
      let asuiArray: any = []
      selectedRowKeys.value.forEach((item: any) => {
        asuiArray.push({
          id: Number(item),
        })
      })
      Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        onOk() {
          pageData.pageLoading = true
          if (id.value == 1) {
            post({
              url: 'dwWms/warehouseBox/delBox',
              // data: selectedRowKeys.value
              data: gridOption.value.getSelectedRows().map((o: any) => {
                return o.id
              }),
            })
              .then(({ code, data }: any) => {
                if (code === 200) {
                  pagination.page = 1
                  doRefresh()
                  Message.success({
                    content: '删除成功',
                    duration: 5000,
                  })
                } else {
                  Message.error({
                    content: '删除失败',
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          } else if (id.value == 2) {
            post({
              url: 'dwWms/warehouseBoxSetposition/delBoxSetposition',
              data: gridOption2.value.getSelectedRows().map((o: any) => {
                return o.id
              }),
            })
              .then(({ code, data }: any) => {
                if (code === 200) {
                  paginations.page = 1
                  doRefresh2()
                  Message.success({
                    content: '删除成功',
                    duration: 5000,
                  })
                } else {
                  Message.error({
                    content: '删除失败',
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                pageData2.pageLoading = false
              })
          }
        },
      })
    }
    //修改 record（本行数据）
    const editHandler = (record: ClothInfo) => {
      post({
        url: '/dwWms/warehouse/getWarehouseByPara',
        data: {
          firmId: record.firmId,
          warehouseTypeName: record.warehouseTypeName,
          // "warehouseName":dataForm.warehouseName
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            whList.value = data
            pageData.isDetails = true
            for (let key in record) {
              dataForm[key] = record[key]
            }
            //侧滑栏滑出滑入
            pageData.showAdd = true
            pageData.sideTitle = '修改仓库包装盒'
          }
        })
        .catch(console.log)
      console.log(whList, '11111111111111111111111')
    }
    //修改 record（本行数据）
    const editHandler1 = (record: any) => {
      for (let key in record) {
        dataForm[key] = record[key]
      }
      dataForm.warehouseId = record.warehouseId
      //侧滑栏滑出滑入
      pageData2.showAdd = true
      pageData2.sideTitle = '修改包装盒'
    }
    let cxbl = ''
    const selectHanler = () => {
      if (id.value == 1) {
        page.value = 1
        cxbl = pageData.warehouseCode
        doRefresh()
      } else if (id.value == 2) {
        page.value = 1
        cxbl = pageData2.boxName
        doRefresh2()
      }
    }
    const isChiese = (value: string, cb: Function) => {
      return new Promise<void>((resolve) => {
        if (window.encodeURI(value).indexOf('%') !== -1) {
          cb('填写的值只能是英文数字组合或英文，数字！')
        }
        resolve()
      })
    }
    const inputBlur = () => {
      dataForm.positionCode = dataForm.positionCode.toUpperCase()
    }
    const inputBlur1 = () => {
      dataForm.boxCode = dataForm.boxCode.toUpperCase()
    }
    const exports = () => {
      if (selectedRowKeys.value.length === 0) {
        Message.error('请先勾选')
        return
      } else {
        //将表头拼接出来
        if (id.value == 2) {
          let head =
            '<th>仓库编号</th><th>仓库名称</th><th>盒子编号</th><th>盒子名称</th><th>布笼编号</th><th>布笼名称</th><th>储位编号</th><th>储位名称</th><th>备注</th>'
          //拿到当前表格数据与勾选的行做筛选

          let nowRow = table.dataList.filter(function (o) {
            return selectedRowKeys.value.indexOf(o['id']) !== -1
          })
          let body = ''
          nowRow.forEach(function (o) {
            body += '<tr><td>' + o['yarnCode'] + '</td>'
            body += '<td>' + o['property'] + '</td>'
            body += '<td>' + o['yarnTypeName'] + '</td>'
            body += '<td>' + o['num'] + '</td>'
            body += '<td>' + o['coefficient'] + '</td>'
            body += '<td>' + o['remark'] + '</td>'
            body += '</tr>'
          })
          tableToXlsx(head, '纱支', body)
        } else if (id.value == 1) {
          let head = '<th>纱支类别编号</th><th>纱支类别</th>'
          //拿到当前表格数据与勾选的行做筛选

          let nowRow = table.dataList.filter(function (o) {
            return selectedRowKeys.value.indexOf(o['id']) !== -1
          })
          let body = ''
          nowRow.forEach(function (o) {
            body += '<tr><td>' + o['typeCode'] + '</td>'
            body += '<td>' + o['typeName'] + '</td>'
            body += '</tr>'
          })
          tableToXlsx(head, '纱支类别', body)
        }
      }
    }

    function tableToXlsx(head: any, filename: any, body: any) {
      const uri = 'data:application/vnd.ms-excel;base64,',
        template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`

      const a = document.createElement('a')
      a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
      a.download = filename
      a.click()
      document.removeChild(a)
    }

    //模板下载
    const downloadHandler = () => {
      if (id.value == 1) {
        axios
          .get(baseURL + '/product/yarnType/uploadModel', {
            responseType: 'blob',
            headers: {
              token: sessionStorage.getItem('USER-TOKEN-KEY'),
            },
          })
          .then((res) => {
            if (res.status === 200) {
              filedownload(res.data, '纱支类别.xlsx')
            }
          })
      } else if (id.value == 2) {
        axios
          .get(baseURL + '/product/yarn/uploadModel', {
            responseType: 'blob',
            headers: {
              token: sessionStorage.getItem('USER-TOKEN-KEY'),
            },
          })
          .then((res) => {
            if (res.status === 200) {
              filedownload(res.data, '纱支.xlsx')
            }
          })
      }
    }
    const importHandler = () => {
      const inputEle: HTMLInputElement = document.createElement('input')
      inputEle.type = 'file'
      inputEle.id = 'fileUploadExcel'
      inputEle.accept =
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
      inputEle.addEventListener('change', (e) => {
        const formData = new FormData()
        if (inputEle.files !== null) {
          formData.append('file', inputEle.files[0] || '')
        } else {
          Message.warning('未选择文件！')
          return
        }
        pageData.pageLoading = true

        if (id.value == 1) {
          axios
            .post(baseURL + '/product/yarnType/analyseYarnTypeModel', formData, {
              headers: {
                'Content-Type': 'multipart/form-data',
                token: sessionStorage.getItem('USER-TOKEN-KEY'),
              },
            })
            .then((result) => {
              if (result.data['code'] === 200) {
                Message.success('导入成功')
              } else {
                Message.error(result.data.message)
              }
            })
            .finally(() => {
              pageData.pageLoading = false
              doRefresh()
            })
        } else if (id.value == 2) {
          axios
            .post(baseURL + '/product/yarn/analyseYarnDanielModel', formData, {
              headers: {
                'Content-Type': 'multipart/form-data',
                token: sessionStorage.getItem('USER-TOKEN-KEY'),
              },
            })
            .then((result) => {
              if (result.data['code'] === 200) {
                Message.success('导入成功')
              } else {
                Message.error(result.data.message)
              }
            })
            .finally(() => {
              pageData.pageLoading = false
              doRefresh2()
            })
        }
      })
      inputEle.click()
    }
    //根据仓库编号拿到仓库名称

    const changeCk = (val: any) => {
      let list = whList.value.filter(function (o: any) {
        return o['warehouseCode'] == val
      })

      if (list.length > 0) {
        dataForm.ckName = list[0]['warehouseName']
      }
    }
    //根据盒子编号拿到盒子名称
    const changeHz = (val: any) => {
      let list = whList.value.filter(function (o: any) {
        return o['boxCode'] == val
      })

      if (list.length > 0) {
        dataForm.hzName = list[0]['boxName']
      }
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
    }
    //仓库包装盒 查询里的仓库名称下拉框 改变
    const whCkCodes = () => {
      dataForm.storageName = ''
      dataForm.shelveName = ''
      const list: any = whList.value.filter((item: any) => {
        return item.id == dataForm.warehouseId
      })
      //   dataForm.warehouseId = list[0]['warehouseId']
      dataForm.warehouseName = list[0]['warehouseName']
      dataForm.warehouseCode = list[0]['warehouseCode']
      if (dataForm.warehouseId != '') {
        pageData.isWh = true
      } else {
        pageData.isWh = false
      }
    }

    const whCkCodes1 = (val: any) => {
      pageData2.boxName = ''
      dataForm.boxName = ''
      let list = whList.value.filter(function (o: any) {
        return o['id'] == val
      })
      dataForm.warehouseName = list[0]['warehouseName']
      dataForm.warehouseCode = list[0]['warehouseCode']
      if (val != '') {
        pageData.isWh = true
      } else {
        pageData.isWh = false
      }
    }
    //新增里的盒子名称下拉框
    const hzCkCodes = (val: any) => {
      dataForm.storageName = ''
      dataForm.shelveName = ''
      pageData.hzList.forEach((item: any) => {
        if (item.boxName == val) {
          dataForm.boxCode = item.boxCode
        }
      })
      if (val != '') {
        pageData.isWh = true
      } else {
        pageData.isWh = false
      }
    }
    //新增里的布笼名称下拉框
    const hjCkCodes = (val: any) => {
      pageData.hjList.forEach((item: any) => {
        if (item.shelveName == val) {
          dataForm.shelveCode = item.shelveCode
        }
      })
    }
    //新增里的储位名称下拉框
    const cwCkCodes = (val: any) => {
      pageData.cwList.forEach((item: any) => {
        if (item.storageName == val) {
          dataForm.storageCode = item.storageCode
        }
      })
    }
    // const handleSearchs = () => {
    //     if (dataForm.firmId == null || dataForm.warehouseTypeName == "" || dataForm.firmId == "") {
    //         whList.value = []
    //         Message.error('请先选择仓库类型和公司')
    //         return
    //     }
    // }
    const handleSearchs2 = () => {
      if (dataForm.firm == '' && dataForm.warehouseTypeName == '' && dataForm.warehouseName == '') {
        dataForm.boxName = ''
        Message.error('请先选择仓库类型,公司和仓库名称')
        return
      }
    }
    const localeText1: any = ref(localeText)
    return {
      ckmcFocus3,
      gsClick,
      localeText1,
      whCkCodes1,
      hzmcFocus1,
      companyChange1,
      ckmcFocus1,
      options5,
      loading5,
      handleSearch5,
      focusSel5,
      // options6,
      // loading6,
      // handleSearch6,
      // focusSel6,
      options7,
      loading7,
      handleSearch7,
      focusSel7,
      handleSearchs2,
      // handleSearchs,
      cwCkCodes,
      cwmcFocus,
      hjCkCodes,
      hzCkCodes,
      whCkCodes,
      changeHz,
      // ckChange,
      hzmcFocus,
      hjmcFocus,
      ckmcFocus,
      handleSearch11,
      focusSel2,
      pageData3,
      defaultColDef,
      tc,
      tc2,
      gridReady,
      gridReady2,
      total,
      PageSize,
      getCorporateList,
      corporateChange,
      corporateRef,
      change1,
      page,
      size,
      exports,
      inputBlur1,
      isChiese,
      inputBlur,
      selectHanler,
      editHandler1,
      isArr,
      // szTyoeNames,
      szTypeName,
      tableColumns2,
      id,
      editHandler,
      handoff,
      sideNo,
      sideNo2,
      deleteHandler,
      sideOk,
      sideOk1,
      formRef,
      dataForm,
      addHandler,
      selectedRowKeys,
      pagination,
      paginations,
      tableColumns,
      table,
      rowKey,
      pageData,
      pageData2,
      queryData,
      //options1,
      //loadings1,
      importHandler,
      downloadHandler,
      options12,
      loadings12,
      handleSearch12,
      headerShow,
      focusSel,
      tableList1,
      tableList2,
      companyList,
      companyChange,
      whTypeFieldList,
      whTypeList,
      whTypeList1,
      whChange,
      whList,
      changeCk,
      gs,
      // getAllActiveCompany,
      getAllActiveCompany2,
    }
  },
  components: { Toolbar,  },
}
</script>
<style scoped lang="less">
.selectCc {
  width: 100%;
  text-align: right;
  margin-right: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}
</style>